<template>
  <div class="recommend-report-page">
    <div class="dis-flex tabs">
      <div class="title"> 数据分析：</div>
      <div class="flex-full biger-radio">
        <el-radio-group v-model="analyseType">
          <el-radio
            v-for="item in analyseTypeList"
            :key="item.name"
            :label="item.name"
          >{{ item.name }}</el-radio>
        </el-radio-group>
      </div>
    </div>
    <component :is="reportComponentName" :category-list="categoryList" />
  </div>
</template>
<script>
import { getDictByPatchType } from '@/api/dataDict'
import OverAllSalesReport from './components/OverAllSalesReport.vue'
import AreaSalesReport from './components/AreaSalesReport.vue'
// import AreaSalesReport from './components/AreaSale.vue'
import AreaSalesStructureReport from './components/AreaSalesStructureReport.vue'
import ProductZoneReport from './components/ProductZoneReport.vue'
import MarketLevelReport from './components/MarketLevelReport.vue'
import PriceZoneReport from './components/PriceZoneReport.vue'
import SpecificationsReport from './components/SpecificationsReport.vue'
import SizeReport from './components/SizeReport.vue'
import StyleReport from './components/StyleReport.vue'
import MarketTimeReport from './components/MarketTimeReport.vue'
import TopReport from './components/TopReport.vue'
export default {
  name: 'RecommendReport',
  components: {
    OverAllSalesReport,
    AreaSalesReport,
    ProductZoneReport,
    MarketLevelReport,
    PriceZoneReport,
    SpecificationsReport,
    SizeReport,
    StyleReport,
    MarketTimeReport,
    TopReport,
    AreaSalesStructureReport
  },
  data() {
    return {
      categoryList: [],
      analyseType: '销量总体分析', // 销量总体分析
      analyseTypeList: [
        { name: '销量总体分析', componentName: 'OverAllSalesReport' },
        { name: '区域销量分析', componentName: 'AreaSalesReport' },
        { name: '区域销量结构分析', componentName: 'AreaSalesStructureReport' },
        { name: '市场层级分析', componentName: 'MarketLevelReport' },
        { name: '产品专区分析', componentName: 'ProductZoneReport' },
        { name: '价格区间分析', componentName: 'PriceZoneReport' },
        { name: '规格分析', componentName: 'SpecificationsReport' },
        { name: '尺寸分析', componentName: 'SizeReport' },
        { name: '风格分析', componentName: 'StyleReport' },
        { name: '上市时间分析', componentName: 'MarketTimeReport' },
        { name: '产品TOP排名分析', componentName: 'TopReport' }
      ]
    }
  },
  computed: {
    curType() {
      const curObj = this.analyseTypeList.find(v => v.name === this.analyseType)
      return curObj || ''
    },
    reportComponentName() {
      return this.curType && this.curType.componentName || ''
    }
  },
  async  created() {
    const { ZONE_DIVISION } = await getDictByPatchType(['ZONE_DIVISION'])
    this.categoryList = ZONE_DIVISION
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.recommend-report-page{
  padding: 0;
  /deep/.el-radio-group{
    .el-radio {
      border: 1px solid #3dc094;
      padding-right: 10px;
      border-radius: 3px;
      line-height: 24px;
      margin-bottom: 5px;
      margin-right: 10px;
    }
    .el-radio__input {
      display: none;
      cursor: pointer;
      vertical-align: middle;
    }
    .el-radio__input.is-checked+.el-radio__label {
      color: #fff;
    }
    label.el-radio.is-checked {
      background-color: #3dc094;
      color: #fff
    }
  }
  .biger-radio{
    /deep/ .el-radio-group{
      .el-radio {
        border-radius: 5px;
        line-height: 32px;
        margin-right: 15px;
        .el-radio__label{
          font-size: 14px;
        }
      }
    }
  }

  /deep/ .dis-flex{
    display: flex;
    justify-content: space-between;
    .title{
      line-height: 36px;
      font-weight: bold;
      margin-right: 10px;
      font-size: 14px;
    }
    .flex-full{
      flex: 1;
    }
  }

  /deep/ .search-bar{
    margin: 6px -12px 0;
    padding: 10px 12px;
    box-sizing: border-box;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    background: #f5f5f5;
    .btns{
      margin-left: 20px;
    }
    .activePageName{
      font-size: 16px;
      font-weight: bold;
      margin-right: 20px;
    }
  }
  /deep/ .table-list-box{
    .green{
      color: green;
    }
    .red{
      color:red
    }
  }
}
</style>
